<template>
  <div class="app-container">
    <iframe
      id="reportFrame"
      width="100%"
      height="300px"
      frameborder="0"
      scrolling="auto"
      :src="form.name"
    >
    </iframe>
  </div>
  <div   style="
      width: 803px;
      height: 500px;
      border: 1px solid #000;">
      
      <div
    style="
      width: 100px;
      height: 50px;
      border: 1px solid #000;
      text-align: center;
      line-height: 50px;
      margin-top: 50px;
    "
  >
    日期
  </div>
  <div
    style="
      width: 300px;
      height: 49px;
      border: 1px solid #000;
      text-align: center;
      line-height: 50px;
      margin-left: 101px;
      margin-top: -51px;
    "
  >
    <el-date-picker
      v-model="form.StartTime"
      type="date"
      placeholder="请选择"
      format="YYYY-MM-DD"
      style="width: 100px"
    />-
    <el-date-picker
      v-model="form.EndTime"
      type="date"
      placeholder="请选择"
      format="YYYY-MM-DD"
      style="width: 100px"
    />
  </div>
  <div>
    <div
      style="
        width: 100px;
        height: 50px;
        border: 1px solid #000;
        text-align: center;
        line-height: 50px;
        margin-left: 402px;
        margin-top: -51px;
      "
    >
      羊只类型
    </div>
  </div>
  <div
    style="
      width: 300px;
      height: 50px;
      border: 1px solid #000;
      text-align: center;
      line-height: 50px;
      margin-left: 503px;
      margin-top: -52px;
    "
  >
    <el-select v-model="form.region" placeholder="请选择" style="width: 200px">
      <el-option label="种公" :value=1 />
      <el-option label="种母" :value=2 />
      <el-option label="后裔" :value=3 />
    </el-select>
  </div>
  <div
    style="
      width: 100px;
      height: 50px;
      border: 1px solid #000;
      text-align: center;
      line-height: 50px;
    "
  >
    查询条件
  </div>
  <div
    style="
      width: 300px;
      height: 50px;
      border: 1px solid #000;
      text-align: center;
      line-height: 50px;
      margin-left: 101px;
      margin-top: -52px;
    "
  >
  <el-select v-model="form.EnquireId" placeholder="请选择" style="width: 200px" @change="Seach()">
      <el-option label="栋舍" :value=1 />
      <el-option label="耳号或批次" :value=2 />
      <el-option label="品种" :value=3 />
    </el-select>
  </div>
  <div>
    <div
      style="
        width: 100px;
        height: 50px;
        border: 1px solid #000;
        text-align: center;
        line-height: 50px;
        margin-left: 402px;
        margin-top: -53px;
      "
    >
      查询条件值
    </div>
  </div>
  <div
    style="
      width: 300px;
      height: 50px;
      border: 1px solid #000;
      text-align: center;
      line-height: 50px;
      margin-left: 503px;
      margin-top: -52px;
    "
  >
    <el-select v-model="form.EnquNum" placeholder="请选择" style="width: 200px" v-if="form.EnquireId==1">
      <el-option v-for="item in SeachData" :label="item.buildingName" :value="item.buildingId" />
    </el-select>
    <el-select v-model="form.EnquNum" placeholder="请选择" style="width: 200px" v-if="form.EnquireId==2">
      <el-option v-for="item in SeachData" :label="item.auricle" :value="item.breedingSheepArchiveId" />
    </el-select>
    <el-select v-model="form.EnquNum" placeholder="请选择" style="width: 200px" v-if="form.EnquireId==3">
      <el-option v-for="item in SeachData" :label="item.sheepbreedName" :value="item.sheepbreedId" />
    </el-select>
    <el-select v-model="form.EnquNum" placeholder="请选择" style="width: 200px" >
      <el-option v-for="item in SeachData" :label="item.buildingName" :value="item.buildingId" />
    </el-select>
  </div>
  <div
    style="
      width: 100px;
      height: 50px;
      border: 1px solid #000;
      text-align: center;
      line-height: 50px;
    "
  >
    汇总方式
  </div>
  <div
    style="
      width: 702px;
      height: 50px;
      border: 1px solid #000;
      text-align: center;
      line-height: 50px;
      margin-left: 101px;
      margin-top: -52px;
    "
  >
  <el-select v-model="form.region" placeholder="请选择" style="width: 600px">
      <el-option label="栋舍类型" :value=1 />
      <el-option label="栋舍" :value=2 />
      <el-option label="品种" :value=3 />
      <el-option label="繁殖状态" :value=4 />
      <el-option label="种公类型" :value=5 />
    </el-select>
  </div>
  <el-button type="primary" >查询</el-button>
  <el-button type="primary" >取消</el-button>
    </div>
  
 
</template>

<script setup lang="ts">
import axios from "axios";
import { reactive, ref } from "vue";

const form = reactive({
  name: "",
  StartTime: "",
  EndTime: "",
  SheepTypeId:'',
  EnquireId:'',
  EnquNum:'',
  nameNum:'',
  value:''
});

form.name =
  "http://localhost:8075/webroot/decision/view/report?viewlet=%25E7%25BE%258A%25E5%258F%25AA%25E6%258A%25A5%25E8%25A1%25A8.cpt";
const SeachData=ref([]) 
function Seach() {
  if(form.EnquireId==1)
  {
    axios.post("http://localhost:5012/api/Report/SheepmethodReport",{})
    .then(res=>{
      console.log(res);
      SeachData.value=res.data.data
    })
  }
  else if(form.EnquireId==2)
  {
    axios.post("http://localhost:5012/api/Report/SheepEarReport",{})
    .then(res=>{
      SeachData.value=res.data.data
    })
  }
  else if(form.EnquireId==3)
  {
    axios.post("http://localhost:5012/api/Report/SheepBeedReport",{})
    .then(res=>{
      SeachData.value=res.data.data
    })
  }
}
</script>

<style scoped></style>
